<template>
      <div class="others">
           <div class="hot_box">
                 <div class="hot_l">
                    <span class="iconfont">&#xe61b;</span>
                     定位失败
                 </div>
                 <div class="hot_r">
                   <span class="iconfont">&#xe689;</span>
                   必游榜单
                 </div>
           </div>
           <div class="line_bot"></div>
           <!--本周热门榜单-->
           <div class="w_hot">
                <div class="hot_t">
                    <div class="left">
                        <span class="iconfont">&#xe7a9;</span>
                         本周热门榜单
                    </div>
                    <div class="right">
                        全部榜单 >
                    </div>
                </div>
                <div class="hot_b">
                  <ul class="list">
                      <li v-for="(item,index) in hotbdan" :key="item.id">
                          <img :src="item.imgUrl" alt="">
                          <p class="one">{{item.desc}}</p>
                          <p class="end"><span>￥{{item.price}}</span>起</p>
                      </li>
                  </ul>
                </div>
           </div>
           <div class="line_bot"></div>
           <!--猜你喜欢部分-->
           <div class="yLike">
                <div class="title">
                    <span class="star iconfont">&#xe7a9;</span>
                    <span class="r">猜你喜欢</span>
                </div>
               <!--内容部分-->
               <router-link
                 :to="'/detail/'+item.id"
                 class="like_content"
                 v-for="(item,index) in yLikeData"
                 :key="item.id"
                 tag="div"
               >
                     <div class="like_l">
                         <img :src="item.imgUrl" alt="">
                     </div>
                     <div class="like_r">
                         <p class="like_r_name">{{item.desc}}</p>
                         <p class="like_r_star">
                            <span class="s iconfont">&#xe64a;&#xe64a;&#xe64a;&#xe64a;&#xe64a;</span>
                            <span class="text">{{item.num}}条评论</span>
                         </p>
                          <div class="like_r_price">
                             <div class="left">
                               <span><span>￥</span>{{item.price}}</span>
                               <span>起</span>
                             </div>
                             <span class="right">{{item.address}}</span>
                          </div>
                          <p class="like_cont" v-show="item.text.length>0">{{item.text}}</p>
                     </div>
               </router-link>
           </div>
      </div>
</template>

<script>
    export default {
        name: "Other",
       props:{
         hotbdan:Array,
         yLikeData:Array
       },
        data () {
           return {
           //   hotbdan:[
           //     {
           //       "id": "0001",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
           //       "desc": "故宫",
           //       "price": 14
           //     },
           //     {
           //       "id": "0002",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",
           //       "desc": "八达岭长城",
           //       "price": 350
           //     },
           //     {
           //       "id": "0003",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_250x250_ecfa0df2.jpg",
           //       "desc": "水立方",
           //       "price": 250
           //     },
           //     {
           //       "id": "0004",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
           //       "desc": "南山滑雪场",
           //       "price": 250
           //     },
           //     {
           //       "id": "0005",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
           //       "desc": "南山滑雪场",
           //       "price": 250
           //     }
           //   ],
           //   yLikeData:[
           //     { "id": "0001",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_200x200_9638020d.jpg",
           //       "desc": "渔阳滑雪场",
           //       "num": 532,
           //       "price": 79.5,
           //       "address": "平谷区",
           //       "text": "世界五大宫之首,穿越与您近在咫尺"
           //     },
           //     { "id": "0002",
           //       "imgUrl": "https://imgs.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_200x200_2458ffb2.jpg",
           //       "desc": "八达岭长城",
           //       "num": 96785,
           //       "price": 79.5,
           //       "address": "延庆县",
           //       "text": "不到长城非好汉"
           //     },
           //     { "id": "0003",
           //       "imgUrl": "https://imgs.qunarzz.com/sight/p0/1911/29/29d9b9078000774fa3.img.jpg_200x200_3621a35a.jpg",
           //       "desc": "北京欢乐谷",
           //       "num": 435654,
           //       "price": 145,
           //       "address": "朝阳区",
           //       "text": "亚洲唯一飞行式过山车等你来挑战"
           //     },
           //     { "id": "0004",
           //       "imgUrl": "https://imgs.qunarzz.com/sight/p0/1507/cc/19733fc0135062788140cbb48ae606a7.water.jpg_200x200_d9ebe2fd.jpg",
           //       "desc": "北京野生动物园",
           //       "num": 38074,
           //       "price": 122,
           //       "address": "大兴区",
           //       "text": "敢与森林之王近距离接触吗？"
           //     },
           //     { "id": "0005",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1709/e4/e48857f2ce5e53a7a3.img.jpg_200x200_8ee069fe.jpg",
           //       "desc": "远去的恐龙",
           //       "num": 23535,
           //       "price": 45.5,
           //       "address": "东城区",
           //       "text": "一部不可思议的巨制演绎作品"
           //     },
           //     { "id": "0006",
           //       "imgUrl": "http://img1.qunarzz.com/sight/p0/1602/67/67feeab24cfc82bb90.water.jpg_200x200_af2a01b1.jpg",
           //       "desc": "太平洋海底世界",
           //       "num": 334545,
           //       "price": 345.5,
           //       "address": "西城区",
           //       "text": ""
           //     }
           //   ]
           }
        }
    }
</script>
<style lang="stylus" scoped>
    .hot_box{
       display flex;
       border-bottom :1px solid #eaeaea;
       color:#212121;
      font-size :.14rem;
      .hot_l{
        border-right:1px solid #eaeaea;
      }
       div{
         width: 50%;
         text-align center
         line-height :.5rem;
       }
    }
  .line_bot{
    width: 100%
    height:.08rem;
    background :#eaeaea;
  }
//  本周热门榜单
  .w_hot{
    .hot_t{
          display flex
          padding:.1rem;
          justify-content space-between;
          line-height:.22rem;
      .left{
        font-size :.16rem;
        span{
          font-size .16rem;
          color:orangered;
        }
      }
      .right{
        font-size .12rem;color:#666666;
      }
    }

  }
  .hot_b{
       overflow-x scroll
       white-space nowrap
       padding-bottom :.1rem;
      .list{
         padding-left:.1rem;
          li{
             display inline-block
             text-align center
             margin-right:.05rem;
             img{
                width: 1rem;
                height: 1rem;
             }
            .one{
              margin-top:.05rem;
            }
            .end{
                margin-top:.05rem;
                span{
                  color:#ff8300;

                }
            }
          }
      }
  }
//  猜你喜欢部分
    .yLike{
      padding:.1rem 0 0 .1rem;
      .star{
        color:red;
      }
       .r{
         font-size:.16rem;
       }
    }
    .yLike{
        .like_content{
           border-bottom :1px solid #cacaca;
           margin:.1rem 0;
           display:flex;
           padding-bottom :.1rem;
          .like_l{
               img{
                 width: 1rem;
                 height:1rem;
               }
          }
          .like_r{//右边文本
              margin-left :.1rem;
              flex:1;
              padding-right :.2rem;
             .like_r_name{
               margin-top: .13rem;
               height: .22rem;
               color: #212121;
               font-size: .16rem;
               line-height: .22rem;
             }
             .like_r_star{
               margin-top: .07rem;
               height: .17rem;
               font-size :.12rem;
               .s{
                 color:#ffb436;
               }
               .text{
                   margin-left:.2rem;
               }
             }
             .like_r_price{
                margin-top: .11rem;
                color: #616161;
                font-size: .12rem;
                line-height: .2rem;
                display:flex;
                justify-content space-between
               .left{
                 span:nth-of-type(1){
                   color:#ff8300
                   span{
                     font-size :.12rem;
                   }
                   font-size:.2rem;
                 }
               }
             }
            .like_cont{
               margin-top :.2rem;
                color: #f55;
                font-size: .12rem;
                line-height: .17rem;
            }
          }
        }
    }
</style>
